<!--  -->
<template>
  <div class="container">
    <div class="box">
      <div class="item">
        <div class="lt">医&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;院：</div>
        <div class="font_15">{{form.hospital_name}}</div>
      </div>
      <div class="item">
        <div class="lt">项目分类：</div>
        <div class="font_15">{{form.group_category_name}}</div>
      </div>
      <div class="item">
        <div class="lt">项目名称：</div>
        <div class="font_15">{{form.dd_project_name}}</div>
      </div>
      <div class="item">
        <div class="lt">用户姓名：</div>
        <div class="font_15">{{form.username}}</div>
      </div>
      <div class="item">
        <div class="lt">用户手机号：</div>
        <div class="font_15">{{form.user_pone}}</div>
      </div>
    </div>
    <!-- 项目完成时间 -->
    <div class="project">
      <div class="df">
        <div class="ml">
          <span class="red">*</span>完成项目时间
          <input type="text" v-model="create_time" class="mr_5" placeholder="请选择日期" />
        </div>
        <div class="list-buttom cur-date" @click="showDatePicker">
          <span class="icon-span">
            <Icon type="ios-arrow-right" class="select-icon"></Icon>
          </span>
        </div>
      </div>
      <div class="hexBtn" @click="toList">确认核销</div>
    </div>
  </div>
</template>

<script>
import api from "../../assets/js/api";
import { Toast } from "mint-ui";
export default {
  data () {
    return {
      form:{
        hospital_name:'',
        group_category_name:'',
        dd_project_name:'',
        username:'',
        user_pone:'',
      },
      dd_id:'',
      create_time:'',
    };
  },
  mounted(){
     document.title = "传统报单核销";
    this.axios.defaults.baseURL = api;
    this.dd_id = this.$route.query.dd_id
    if(this.dd_id){
      this.hexiao(this.dd_id)
    }
  },
  methods: {
    // 详情
    hexiao(dd_id){
      this.axios.post('api/butler/declaration/details',{dd_id}).then(res=>{
        console.log('res',res.data)
        if(res.data.code == 200){
          this.form = res.data.data
        }else{
           Toast({
              message: res.data.msg,
              position: "bottom",
              duration: 2000
            });
        }
      })
    },
    async toList(){
      let {data:res} = await this.axios.post('api/butler/declaration/writeoff',{dd_id:this.dd_id,complete_time:this.create_time+':00'});
      console.log('res11',res);
      if(res.code == 200){
        this.$router.go(-2);
        // this.$router.push({path:'/createForm',query:{dd_id:this.dd_id,pageType:"detail"}})
      }else{
         Toast({
              message: res.data.msg,
              position: "bottom",
              duration: 2000
            });
      }
    },
    showDatePicker() {
      if (!this.datePicker) {
        this.datePicker = this.$createDatePicker({
          title: "日期",
          min: new Date(2008, 7, 8, 8, 0, 0),
          max: new Date(2050, 9, 20, 20, 59, 59),
          format: {
            year: 'YYYY',
            month: 'MM',
            date: 'DD'
          },
          value: new Date(),
          columnCount: 5,
          onSelect: (date, selectedVal, selectedText) => {
            this.create_time = `${selectedText[0]}-${selectedText[1]}-${selectedText[2]} ${selectedText[3]}:${selectedText[4]}`
          },
          onCancel: () => {
            console.log("取消了");
          }
        });
      }
      this.datePicker.show();
    },
  }
}
</script>
<style  scoped>
.container {
  width: 100%;
  height: 100vh;
  background: #f5f6f7;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.font_15 {
  font-size: 15px;
}
.box {
  width: 100%;
  padding: 13px 15px;
  background: #fff;
  font-size: 17px;
  color: #666;
  margin-bottom: 10px;
  box-sizing: border-box;
}
.item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  font-size: 17px;
  padding-bottom: 13px;
  margin-bottom: 13px;
  box-sizing: border-box;
}
.lt {
  width: 102px;
  font-weight: 500;
  font-family: "PingFangSC-Medium, PingFang SC";
}

.box .item:last-child {
  margin-bottom: 0 !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
.project {
  width: 100%;
  background: #fff;
  padding: 21px 15px 13px 15px;
  box-sizing: border-box;
}
.red {
  color: #ff5050;
  margin-right: 5px;
  font-size: 17px;
  font-weight: 500;
}
.df {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  padding-bottom: 12px;
  box-sizing: border-box;
}
.ml {
  display: flex;
  align-items: center;
}
.mr_5 {
  margin-left: 5px;
}
.hexBtn {
  width: 226px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  color: #fff;
  margin: 300px auto 70px auto;
  background: linear-gradient(180deg, #ffdddd 0%, #ff83a6 100%);
  border-radius: 24px;
  box-sizing: border-box;
}
/* .select-icon {
  font-size: 17px;
  color: #666;
} */
input::-webkit-input-placeholder {
  color: #888;
  font-weight: 400;
}
</style>